<!--
 标题+内容格式组件，一行展示     
 @Author: mosowe
 @Date:2023-01-11 10:27:25
-->

<template>
  <view
    :class="['zo-title-value-component', props.isCol ? 'flex-col' : '']"
    :style="`font-size:${props.size};line-height:${parseInt(props.size) + 10}rpx`"
    @click="click">
    <view
      class="title"
      :style="`padding:${props.space} 0`">
      <slot name="title">
        <text
          :class="['text', [true, 'title'].includes(props.border) ? 'border' : '']"
          :style="{
            textAlign: props.titleAlign,
            width: props.titleWidth || 'unset'
          }">
          {{ props.title }}
        </text>
      </slot>
    </view>
    <view
      class="value"
      :style="`padding:${props.space} 0`">
      <slot name="value">
        <text
          :class="['text', [true, 'value'].includes(props.border) ? 'border' : '']"
          :style="{
            textAlign: props.valueAlign
          }">
          {{ props.value }}
        </text>
      </slot>
    </view>
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
/*
 * 插槽：
 * default 左侧插槽
 * title 标题插槽
 * value 内容插槽
 */

/*
 * @click 点击事件
 */

// props定义
interface PropsType {
  title?: string; // 标题
  titleWidth?: string | null; // 标题固定宽度
  titleAlign?: 'left' | 'right'; // 标题对其方式
  value?: string; // 内容
  valueAlign?: 'left' | 'right'; // 内容对其方式
  isCol?: boolean; // 是否垂直排列
  size?: string; // 尺寸：'24rpx'
  space?: string; // 间隙
  border?: boolean | 'title' | 'value'; // 文字底部下划线显示
}
const props = withDefaults(defineProps<PropsType>(), {
  title: '标题：',
  value: '内容',
  isCol: false,
  size: '24rpx',
  space: '5rpx',
  border: false,
  titleAlign: 'left',
  valueAlign: 'left',
  titleWidth: null
});
// emits
interface EmitsType {
  (e: 'click'): void; // 选中时触发事件
}
const emits = defineEmits<EmitsType>();

// 点击事件
const click = () => {
  emits('click');
};
</script>

<style lang="scss" scoped>
.zo-title-value-component {
  width: 100%;
  display: flex;
  font-size: 24rpx;
  line-height: 30rpx;
  position: relative;
  &.flex-col {
    flex-direction: column;
  }
  .title {
    .text {
      display: block;
      color: #333333;
      &.border {
        text-decoration: underline;
      }
    }
  }
  .value {
    flex: 1;
    .text {
      display: block;
      color: #999999;
      &.border {
        text-decoration: underline;
      }
    }
  }
}
</style>
